<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.bannerId">
        <img :src="item.pic" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 功能区 -->
    <div class="gongneng1 mt2">
      <div
        class="gongneng1-item"
        v-for="(item, index) in gongnengList"
        :key="index + 'gg'"
      >
        <i :class="item.icon"></i>
        <p>{{ item.title }}</p>
      </div>
    </div>

    <!-- 每日推荐 -->

    <div class="dailyRecommend">
      <div class="title">
        <p>每日推荐</p>
      </div>
      <div class="content-box">
        <div
          class="content-item"
          v-for="(item, index) in recommendList"
          :key="item.id"
        >
          <img :src="item.picUrl" :alt="item.name" />
          <p class="desc">{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, reactive, onMounted, defineComponent } from 'vue';
import { getBanner, getRecommend } from '@/api/gexingtuijian.js';
import gongnengSetting from './gongnengIconSetting';
export default defineComponent({
  setup() {
    const bannerList = ref([]);
    const gongnengList = ref(gongnengSetting);
    // const res = await getBanner({ type: 1 });
    const getBannerData = async () => {
      let result = await getBanner({ type: 1 });
      // console.log(result.data);
      bannerList.value = result.data.banners;
      // console.log(bannerList);
    };
    const recommendList = ref([]);
    const getRecommendData = async () => {
      let { data } = await getRecommend();
      recommendList.value = data.recommend;
    };
    onMounted(() => {
      getBannerData();
      getRecommendData();
    });
    return {
      bannerList,
      gongnengList,
      recommendList,
    };
  },
});
</script>

<style lang="scss" scoped>
.mt2 {
  margin-top: 0.2rem;
}
.pd2 {
  padding: 0.2rem;
}
.my-swipe {
  width: 100%;
  height: 3rem;
  img {
    width: 100%;
    height: 100%;
  }
  /* background-color: red; */
}
.gongneng1 {
  width: 100%;
  height: 2rem;
  // background-color: red;
  padding: 0.3rem;
  display: flex;
  border-bottom: 1px solid $wyy-gray;
  .gongneng1-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i {
      font-size: 0.7rem;
      color: $wyy-red;
    }
    p {
      line-height: 0.7rem;
    }
  }
}
.dailyRecommend {
  padding: 0 0.2rem;
  .title {
    height: 0.8rem;
    line-height: 0.8rem;
    position: relative;
    padding-left: 0.4rem;
    &::after {
      content: '';
      width: 0.1rem;
      height: 0.06rem;
      border-radius: 0.1rem;
      border-bottom: 0.4rem solid red;
      position: absolute;
      left: 0%;
      top: 50%;
      transform: translate(0, -50%);
    }
    p {
      font-weight: 700;
    }
  }
  .content-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .content-item {
      width: 47%;
      display: flex;
      flex-direction: column;
      padding: 0.05rem;
      img {
        border-radius: 4px;
        width: 100%;
        height: 80%;
      }
      .desc {
        font-size: 0.25rem;
        line-height: 0.4rem;
      }
    }
  }
}
</style>
